<template>
  <div class="threebox">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      label-position="left"
      style="marginbottom: 80px"
    >
      <el-form-item label="数据源" prop="dataSource">
        <el-select
          v-model="formData.dataSource"
          placeholder="请选择数据源"
          clearable
          :style="{ width: '100%' }"
          :disabled="inputStatus == 0"
        >
          <el-option
            v-for="(item, index) in sourceList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="inputStatus == 1" slot="footer" >
      <el-button type="primary" @click="preservation" class="dialog-footer">保存</el-button>

    </div>
  </div>
</template>
<script>
import { getDataSourceName, editStoreLocation } from "@/api/metadata/metadata";
export default {
  props: {
    allList: {
      type: Object,
    },
  },
  data() {
    return {
      formData: { dataSource: "" },
      sourceList: [],
      info: "",
      inputStatus: "",
      queryParams: {
        dataSourceName: "",
        id: "",
      },
      rules: {
        dataSource: [
          {
            required: true,
            message: "请选择数据源",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    if (localStorage.getItem("status") == 2) {
      this.inputStatus = localStorage.getItem("status");
    } else {
      this.inputStatus = this.allList.status;
      this.info = this.allList.info;
      this.formData.dataSource = this.info.dataSourceName;
    }
    this.getSourceList();
  },
  methods: {
    getSourceList() {
      getDataSourceName()
        .then((response) => {
          this.sourceList = response.data;
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    validateForm() {
      let flag = false;
      this.$refs.elForm.validate((valid) => {
        flag = valid;
      });
      return flag;
    },
    //保存的接口
    preservation() {
      this.queryParams.dataSourceName = this.formData.dataSource;
      this.queryParams.id = this.info.id;
      editStoreLocation(this.queryParams)
        .then((response) => {
          if (response.success) {
            this.$modal.msgSuccess("修改成功");
            this.$router.push("/metadata/metadataList");
          }
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.threebox {
  width: 56%;
  margin: 50px auto 80px;
}
::v-deep .el-form-item__content{
  width: 700px;
  height: 40px;
}
.dialog-footer {
width: 122px;
height: 40px;
background-color: $labelColor;
color: #fff;
font-size: 16px;
margin: 60px 0 0 100px;
border-color:#e8eaec ;
border-radius:4px ;
}
</style>
